import { ref, reactive } from 'vue'
import {ElCollapse, ElCollapseItem, ElForm, ElFormItem, ElInputNumber, ElRadioGroup, ElRadio} from "../lib/element-plus@2.8.4/index.full.min.mjs";
import {getWorld3dInstance} from "../three/src/3d/scene/World3d.js";
import {SprayConfig, DirectEnum} from "../three/src/3d/pathCompute/SprayPathCompute.js";

export default {
  components: {
    ElCollapse, ElCollapseItem, ElForm, ElFormItem, ElInputNumber, ElRadioGroup, ElRadio
  },
  setup() {
    const world3d = getWorld3dInstance()
    const activeNames = ref(['0'])
    const form = reactive(SprayConfig.Default)
    return {
      world3d,
      activeNames,
      form,
      DirectEnum,
    }
  },
  template: `
  <el-collapse v-model="activeNames">
    <el-collapse-item title="生成区域航线的默认配置" name="1">
      <el-form :model="form" label-width="auto">
        <el-form-item label="喷漆宽度">
          <el-input-number v-model="form.rectWidth" :step="0.01" controls-position="right"/>
        </el-form-item>
        <el-form-item label="喷漆高度">
          <el-input-number v-model="form.rectHeight" :step="0.01" controls-position="right"/>
        </el-form-item>
        <el-form-item label="离墙距离">
          <el-input-number v-model="form.sprayDistance" :step="0.1" controls-position="right"/>
        </el-form-item>
        <el-form-item label="换行距离">
          <el-input-number v-model="form.spacingWidth" :step="0.01" controls-position="right"/>
        </el-form-item>
        <el-form-item label="航线类型">
          <el-radio-group v-model="form.direction">
            <el-radio :value="DirectEnum.horizontal">水平航线</el-radio>
            <el-radio :value="DirectEnum.vertical">竖直航线</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="外扩距离">
          <el-input-number v-model="form.expand" :step="0.01" controls-position="right"/>
        </el-form-item>
      </el-form>
    </el-collapse-item>
  </el-collapse>
  `
}
